<template>
  <div>
    <div>
      <common-title :stitle="alldata.title" />
    </div>
    <div :id="'pieDivId' + alldata.itemid" style="height:250px;">
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

import commonTitleMixin from '../mixins/commonTitleMixin'
export default {
  name: 'piechart',
  data: function () {
    return {}
  },
  props: ['alldata'],
  mixins: [commonTitleMixin],
  mounted() {
    this.init()
  },
  methods: {
    init: function () {
      // var title = this.alldata.title

      var innerr = this.alldata.innerr
      var outerr = this.alldata.outerr
      var rosetype = this.alldata.rosetype

      let id = 'pieDivId' + this.alldata.itemid
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(id))
      // var colors = ['#5793f3', '#d14a61', '#675bba']
      // 指定图表的配置项和数据
      var option = {
        // title: {
        //   text: title
        // },
        center: ['150%', '20%'],
        // legend: {
        //   orient: 'horizontal',
        //   // left: 10,
        //   x: 'center',      // 图例在左（left）、右（right）、居中（center）、100px
        //   y: 'bottom'

        // },
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left: '-100%',
          // top: '10%',
          // containLabel: true
        },
        toolbox: {
          feature: {
            restore: {
              show: false
            },
            // 各工具配置项
            dataView: {
              show: false,
              readOnly: false,
              optionToContent: function (opt) {
                var series = this.alldata.pvalue
                var table = '<table class="layui-table"><tbody>'
                for (var i = 0, l = series.length; i < l; i++) {
                  table += '<tr class="">' +
                    '<td class="">' + series[i].name + '</td>' +
                    '<td class="">' + series[i].value + '</td>' +
                    '</tr>'
                }
                table += '</tbody></table>'
                return table
              }
            },
            saveAsImage: {
              show: false
            }, // 保存为图片

            showTitle: true
          }
        },

        series: [
          {
            type: 'pie',
            radius: [innerr + '%', outerr + '%'], // 内半径   外半径

            data: this.alldata.pvalue,
            itemStyle: {
              borderRadius: 6,
              borderColor: '#fff',
              borderWidth: 2
            },
            emphasis: {// 高亮
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',

              }
            }
          }
        ]
      }
      if (rosetype === 'false') {
        option.series[0].roseType = false
      } else {
        option.series[0].roseType = this.alldata.rosetype
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }

}

</script>

<style scoped></style>
